// 设备运行日志
import './equipmentOperation.scss'
import { useState, useEffect } from 'react';
import { Form, Button, Select, Table, DatePicker, Input } from '@arco-design/web-react';
import mochaApi from '../../../API/mochaApi'
const FormItem = Form.Item;
const Operation = () => {
    const [inputFrom] = Form.useForm()
    const pageSize = 5
    //表头数据
    const columns = [
        {
            title: '序号',
            render: (col, record, index) => `${index + 1}`,
            align: 'center'
        },
        {
            title: '所属位置',
            dataIndex: 'parkingName',
        },
        {
            title: '设备编号',
            dataIndex: 'equipmentNum',
        },
        {
            title: '日志类型',
            dataIndex: 'equipmentLogType',
            //1启动 2关闭 3发送数据 4接收数据 5异常告警
            render: (col, record) => {
                if (record.equipmentLogType === 0) {
                    return <span>启动</span>
                } else if (record.equipmentLogType === 1) {
                    return <span>关闭</span>
                } else if (record.equipmentLogType === 2) {
                    return <span>发送数据</span>
                } else if (record.equipmentLogType === 3) {
                    return <span>接收数据</span>
                } else if (record.equipmentLogType === 4) {
                    return <span>异常告警</span>
                }
            }
        },
        {
            title: '日志时间',
            dataIndex: 'equipmentLogTime',
        },
        {
            title: '设备IP信息',
            dataIndex: 'equipmentIp',
        }
    ];
    //表格数据
    const [data, setData] = useState([]);
    //获取表格全部数据
    const getTableData = () => {
        mochaApi.geteOperation().then((res) => {
            if (res.code === 200) {
                setData(res.result)
            }
        })
    }
    useEffect(() => {
        getTableData()
    }, [])
    //多条件查询
    const queryBtn = () => {
        let value = inputFrom.getFieldsValue()
        let obj = {
            parkingName: value.parkingName === undefined ? '' : value.parkingName,
            startTime: value.startTime === undefined ? '' : value.startTime,
            endTime: value.endTime === undefined ? '' : value.endTime,
            equipmentLogType: value.equipmentLogType === undefined ? '' : value.equipmentLogType,
            equipmentNum: value.equipmentNum === undefined ? '' : value.equipmentNum
        }
        mochaApi.queryOperation(obj).then((res) => {
            if (res.code === 200) {
                setData(res.result)
            }
        })
    }
    //重置
    const resetBtn = () => {
        inputFrom.clearFields()
        getTableData()
    }
    return <div className='equipmentOperation'>
        <div className='formBox'>
            <Form form={inputFrom} className='formBoxFrom' layout='inline' colon size='default'>
                <FormItem label='所属位置' field='parkingName'>
                    <Input placeholder='请输入' />
                </FormItem>
                <FormItem label='起止日期' field='startTime' >
                    <DatePicker style={{
                        width: 280,
                        margin: '0 24px 24px 0'
                    }}
                        format='YYYY-MM-DD'
                    />
                </FormItem>
                <FormItem label='结束日期' field='endTime' >
                    <DatePicker style={{
                        width: 280,
                        margin: '0 24px 24px 0'
                    }}
                        format='YYYY-MM-DD'
                    />
                </FormItem>
                <FormItem label='日志类型' field='equipmentLogType'>
                    <Select
                        placeholder='请选择'
                        options={[
                            {
                                label: '启动',
                                value: 0,
                            },
                            {
                                label: '关闭',
                                value: 1,
                            },
                            {
                                label: '发送数据',
                                value: 2,
                            },
                            {
                                label: '接收数据',
                                value: 3,
                            },
                            {
                                label: '异常告警',
                                value: 4,
                            },
                        ]}
                        allowClear
                    />
                </FormItem>
                <FormItem label='设备编号' field='equipmentNum'>
                    <Input placeholder='请输入' />
                </FormItem>
            </Form>
            <div className='export'>
                <Button type='primary' onClick={queryBtn}>查询</Button>
                <Button type='outline' onClick={resetBtn}>重置</Button>
            </div>
        </div>
        <Table
            rowKey={(record) => record.equipmentLogId}
            columns={columns}
            data={data}
            pagination={{
                // showJumper: true,
                pageItemStyle: { border: "1px solid #ccc", borderRadius: '5px' },
                activePageItemStyle: { backgroundColor: '#1890ff', color: '#fff' },
                sizeCanChange: true, size: 'mini', pageSize: pageSize,
                showTotal: (total, range) => `共 ${total} 条 第 ${range[1] / pageSize} / ${Math.ceil(total / pageSize)} 页`
            }}
        />
    </div>
}
export default Operation